<template>
    <div id="dropBtn" :data-drop-menu-auto="autoOpen" class="dropdown display-inline">
        <a href="#" class="btn dropdown-toggle" :class="btnClass" data-toggle="dropdown" :id="id">
            <slot></slot>
            <i class="fa fa-angle-down p-l-5"></i>
        </a>
        <ul class="dropdown-menu" :aria-labelledby="id">
            <li v-for="menu in menus" :key="menu.id" :class="menu.divider">
                <router-link v-if="menu.divider == null" :to="menu.link">{{menu.name}}</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    /* eslint-disable no-undef */
    export default {
		name: 'DropButton',
        data () {
            return {
                id: 'dropBtn_' + Math.floor(Math.random() * 100000000)
            };
        },
        props: {
            btnClass: {},
            menus: {},
            autoOpen: {default: false}
        },
        mounted () {
            $('[data-drop-menu-auto="true"]').mouseover(function () {
                $(this).addClass('open');
            }).mouseout(function () {
                $(this).removeClass('open');
            });
        }
    };
</script>
